<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测两地距离</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style>
        #daceng {
            width: 500px;
        }
    </style>
</head>
<body>



<input type="text" size="50" id="txtSearch" onkeyup="sou()" autocomplete="off" placeholder="出发地">
<div id="daceng" style="border:1px solid ;display:none"></div>

<input type="text" size="50" id="txtSearch2" onkeyup="sou2()" autocomplete="off" placeholder="到达地">
<div id="daceng2" style="border:1px solid ;display:none"></div>

<input type="button" value="计算两地距离" id="jisuan"><span id="zhi"></span>
<script>
    var xhr;

    function createXHR() {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    function sou() {
        xhr = createXHR();
        var keyword = document.getElementById("txtSearch").value;
        if (keyword.trim().length > 0) {
            xhr.onreadystatechange = callback;
            xhr.open("POST", "/before/ChinaSouServlet", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("keyword=" + keyword);
        } else {
            var daceng = document.getElementById("daceng");
            daceng.style.display = "none";
        }
    }

    function sou2() {
        xhr = createXHR();
        var keyword = document.getElementById("txtSearch2").value;
        if (keyword.trim().length > 0) {
            xhr.onreadystatechange = callback2;
            xhr.open("POST", "/before/ChinaSouServlet2", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("keyword=" + keyword);
        } else {
            var daceng = document.getElementById("daceng2");
            daceng.style.display = "none";
        }
    }

    function callback() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var daceng = document.getElementById("daceng");
            daceng.innerHTML = "";
            var str = xhr.responseText.split(",");
            var xiaoceng = "";

            if (str.length > 0) {
                for (var i = 0; i < str.length; i++) {
                    xiaoceng += "<div onmouseover='jingguo(this)' onmouseout='likai(this)' onclick='xuanzhong(this)'>";
                    xiaoceng += str[i];
                    xiaoceng += "</div>";
                }
                daceng.innerHTML = xiaoceng;
                document.getElementById("daceng").style.display = "block";
            } else {
                document.getElementById("daceng").style.display = "none";
            }
        }
    }

    function callback2() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var daceng = document.getElementById("daceng2");
            daceng.innerHTML = "";
            var str = xhr.responseText.split(",");
            var xiaoceng = "";

            if (str.length > 0) {
                for (var i = 0; i < str.length; i++) {
                    xiaoceng += "<div onmouseover='jingguo2(this)' onmouseout='likai2(this)' onclick='xuanzhong2(this)'>";
                    xiaoceng += str[i];
                    xiaoceng += "</div>";
                }
                daceng.innerHTML = xiaoceng;
                document.getElementById("daceng2").style.display = "block";
            } else {
                document.getElementById("daceng2").style.display = "none";
            }
        }
    }

    function jingguo(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function likai(obj) {
        obj.style.backgroundColor = "";
    }

    function xuanzhong(obj) {
        document.getElementById("txtSearch").value = obj.innerHTML;
        document.getElementById("daceng").style.display = "none";
    }

    function jingguo2(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function likai2(obj) {
        obj.style.backgroundColor = "";
    }

    function xuanzhong2(obj) {
        document.getElementById("txtSearch2").value = obj.innerHTML;
        document.getElementById("daceng2").style.display = "none";
    }




</script>
</body>
<script type="text/javascript">
    $(function () {
        $("#jisuan").click(function() {
            $.ajax({
                url:'/before/ChinaServlet',
                type:'POST',
                data:{txtSearch:$("#txtSearch").val(),txtSearch2:$("#txtSearch2").val()},
                dataType:"json",
                success:function (data) {
                    $("#zhi").html(data.gongli+"公里");
                }
            })

        })
    })

</script>

</html>